<template>
  <view class="container-gray">
    <view
      v-if="certList.length>0"
      style="padding: 0 40upx;margin-bottom: 20upx;background: #FFFFFF;border-top: 1px solid #EDEDED;"
    >
      <view
        class="card-box"
        v-for="(item,index) in certList"
        :key="index"
        :class="item.certType == 1?'idCard-bg':(item.certType == 2?'education-bg':'cert-bg')"
        @longpress="openModel(item.id)"
      >
        <view style="display: flex;align-items: center;height: 80upx;">
          <image
            v-if="item.certType == 1"
            src="../../static/icon/icon-guohui.png"
            style="width: 58upx;height: 64upx;"
          />
          <image
            v-else-if="item.certType == 2"
            src="../../static/icon/icon-xueli.png"
            style="width: 60upx;height: 50upx;"
          />
          <image v-else src="../../static/icon/icon-cert.png" style="width: 60upx;height: 60upx;" />
          <div class="type-name">{{item.certName}}</div>
        </view>
        <view class="flex-box">
          <view style="flex: 1;">*****</view>
          <button class="select-btn" @click="selectCert(item.id)">查看</button>
        </view>
      </view>
    </view>
    <view style="background: #FFFFFF;height: calc(100%);">
      <view class="add-btn" @click="certAdd">
        <image src="../../static/icon/icon-add.png" class="icon-add" />
        <view style="margin-left: 10upx;">添加证件</view>
      </view>
    </view>

    <model v-if="hidden">
      <view class="model-content">
        <view>确定删除？</view>
      </view>
      <view class="model-footer">
        <button class="model-footer-btn cancel" @click="hidden = false">取消</button>
        <button type="primary" class="model-footer-btn primary" @click="deleteHistory()">确定</button>
      </view>
    </model>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
export default {
  data() {
    return {
      certList: [],
      page: 1,
      hidden: false,
      delId: null
    }
  },
  onShow() {
    this.page = 1
    this.certList = []
    this.getCertList()
  },
  methods: {
    // 获取用户所有证件
    async getCertList() {
      const params = {
        userId: uni.getStorageSync('userId')
      }
      let res = await post_md5('/usercenter-app/cert/getcertlistbyuserid', params)
      this.certList = res.data
    },
    // 新增证件
    certAdd() {
      uni.navigateTo({
        url: 'cert-add-or-update'
      })
    },

    // 查看证件
    selectCert(id) {
      uni.navigateTo({
        url: 'cert-add-or-update?id=' + id
      })
    },

    openModel(id) {
      this.hidden = true
      this.delId = id
    },

    // 删除证件
    deleteHistory(id) {
      const params = {
        id: this.delId
      }
      post_md5('/usercenter-app/cert/deletebyid', params).then(res => {
        this.hidden = false
        uni.showToast(
          {
            title: '已删除'
          },
          3000
        )
        this.page = 1
        this.certList = []
        this.getCertList()
      })
    }
  }
}
</script>

<style>
.card-box {
  color: #02a8f4;
  padding: 20upx 40upx;
  border-radius: 10upx;
  height: 140upx;
  margin: 20upx 0;
}

.idCard-bg {
  background-image: url('');
  background-size: 100%;
  background-repeat: no-repeat;
}

.education-bg {
  background-image: url('');
  background-size: 100%;
  background-repeat: no-repeat;
}

.cert-bg {
  background-image: url('');
  background-size: 100%;
  background-repeat: no-repeat;
}

.type-name {
  font-size: 34upx;
  font-weight: bold;
  margin-left: 30upx;
}

.select-btn {
  width: 150upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 30upx;
  color: #02a8f4;
  background: rgba(0, 0, 0, 0.1);
  border: 2upx solid #ffffff;
}

.add-btn {
  display: flex;
  padding: 30upx;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
}

.icon-add {
  width: 40upx;
  height: 40upx;
  /* border: 1px solid #000000;
		border-radius: 50%;
		text-align: center;
		font-size: 40upx;
		line-height: 40upx; */
}
</style>
